<template>
    <view>
        <scroll-view class="container">
            <scroll-view class="content">
                <!-- <template is="wxParse" :data="wxParseData:topicDetail.nodes"/> -->
                <mp-html :content="article_topicDetail"></mp-html>
            </scroll-view>
            <scroll-view class="sv-goods" v-if="topicGoods.length > 0">
                <view class="topic-goods">
                    <view class="h">
                        <text class="t">专题商品</text>
                        <van-icon class="i" @tap.native="addCollectOrNot" name="star" v-if="collect" color="#ab956d" />
                        <van-icon class="i" @tap.native="addCollectOrNot" name="star-o" v-else />
                    </view>
                    <view class="b">
                        <view class="item" v-for="(item, index) in topicGoods" :key="item.id">
                            <navigator :url="'/pages/goods/goods?id=' + item.id">
                                <image class="img" :src="item.picUrl" background-size="cover"></image>
                                <view class="right">
                                    <view class="text">
                                        <text class="name">{{ item.name }}</text>
                                        <text class="desc">{{ item.brief }}</text>
                                        <text class="price">￥{{ item.retailPrice }}</text>
                                    </view>
                                </view>
                            </navigator>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <scroll-view class="comments">
                <view class="h">
                    <text class="t">精选留言</text>
                    <van-icon @tap.native="postComment" class="i" name="comment-o" />
                </view>
                <view class="has-comments" v-if="commentList.length > 0">
                    <view class="b">
                        <view class="item" v-for="(item, index) in commentList" :key="item.id">
                            <view class="info">
                                <view class="user">
                                    <image class="avatar" :src="item.userInfo.avatarUrl"></image>
                                    <text class="nickname">{{ item.userInfo.nickName }}</text>
                                </view>
                                <view class="time">{{ item.addTime }}</view>
                            </view>

                            <view class="comment">
                                {{ item.content }}
                            </view>
                        </view>
                    </view>
                    <view class="load" v-if="commentCount > 5">
                        <navigator :url="'/pages/topicComment/topicComment?valueId=' + topic.id + '&type=1'">查看更多</navigator>
                    </view>
                </view>
                <view class="no-comments" v-if="commentList.length <= 0">
                    <text class="txt">等你来留言</text>
                </view>
            </scroll-view>
            <scroll-view class="rec-box">
                <view class="h">
                    <text class="txt">专题推荐</text>
                </view>
                <view class="b">
                    <navigator class="item" :url="'../topicDetail/topicDetail?id=' + item.id" v-for="(item, index) in topicList" :key="item.id">
                        <image class="img" :src="item.picUrl"></image>

                        <text class="title">{{ item.title }}</text>
                    </navigator>
                </view>
            </scroll-view>
        </scroll-view>
    </view>
</template>

<script>
var app = getApp();

var undefined;

var util = require('../../utils/util.js');

var api = require('../../config/api.js');

export default {
    data() {
        return {
            id: 0,

            topic: {
                id: ''
            },

            topicList: [],
            commentCount: 0,
            commentList: [],
            topicGoods: [],
            collect: false,
            userHasCollect: 0,
            article_topicDetail: 0
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        that.setData({
            id: options.id
        });
        util.request(api.TopicDetail, {
            id: that.id
        }).then(function (res) {
            if (res.errno === 0) {
                that.setData({
                    topic: res.data.topic,
                    topicGoods: res.data.goods,
                    userHasCollect: res.data.userHasCollect,
                    collect: res.data.userHasCollect == 1
                });
                //WxParse.wxParse('topicDetail', 'html', res.data.topic.content, that)
                that.article_topicDetail = that.escape2Html(res.data.topic.content);
            }
        });
        util.request(api.TopicRelated, {
            id: that.id
        }).then(function (res) {
            if (res.errno === 0) {
                that.setData({
                    topicList: res.data.list
                });
            }
        });
    },
    onReady: function () {},
    onShow: function () {
        // 页面显示
        this.getCommentList();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getCommentList() {
            let that = this;
            util.request(api.CommentList, {
                valueId: that.id,
                type: 1,
                showType: 0,
                page: 1,
                limit: 5
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        commentList: res.data.list,
                        commentCount: res.data.total
                    });
                }
            });
        },

        //添加或是取消收藏
        addCollectOrNot: function () {
            let that = this;
            util.request(
                api.CollectAddOrDelete,
                {
                    type: 1,
                    valueId: this.id
                },
                'POST'
            ).then(function (res) {
                if (that.userHasCollect == 1) {
                    that.setData({
                        collect: false,
                        userHasCollect: 0
                    });
                } else {
                    that.setData({
                        collect: true,
                        userHasCollect: 1
                    });
                }
            });
        },

        postComment() {
            if (!app.globalData.hasLogin) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/topicCommentPost/topicCommentPost?valueId=' + this.id + '&type=1'
                });
            }
        }
    }
};
</script>
<style>
@import './topicDetail.css';
</style>
